<template>
  <div class="login"
       id="login">
    <div class="bg-box">
      <div class="bg-img-list"
           ref="bgBox">
        <!-- <div class="img newop"
             style="background:url('./../../img/login-bg01.png') no-repeat fixed"></div>
        <div class="img oldop"
             style="background:url('./../../img/login-bg02.jpg') no-repeat fixed"></div> -->
      </div>
    </div>
    <div class="header">
      <!-- <div class="logo">
        <div class="logo-box">
          <img src="./../../../static/img/logo.png"
               class="logo-img"
               alt="">
        </div>
        <div class="name">后台管理系统</div>
      </div> -->
    </div>
    <div class="content"
         id="content"
         style="display: block">
      <div class="login-box">
        <h2 class="login-title">登 录</h2>
        <div class="login-form">
          <input v-model="username"
                 ref="username"
                 type="text"
                 class="username"
                 id="username"
                 autocomplete="off"
                 placeholder="用户名/账号"
                 @blur="blur(0)"
                 @keyup.enter="login" />
          <input v-model="password"
                 ref="password"
                 type="password"
                 class="password"
                 autocomplete="off"
                 id="password"
                 placeholder="密码"
                 @blur="blur(1)"
                 @keyup.enter="login" />

          <p id="tips"
             class="text-center">{{message}}</p>
          <div class="login-btn"
               id="login-btn"
               @click="login"
               @keyup.enter="login">登&nbsp;&nbsp;录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script> 
import * as api from "./../../api/api";
export default {
  data () {
    return {
      username: null,
      password: null,
      //--------滑动验证相关----------
      mouseDownFlag: false, //鼠标是否按下
      validationFlag: false, //是否开始验证
      mouseOverFlag: false, //鼠标是否移入
      showImg: false, //显示图片
      startX: 0, //鼠标按下初始横坐标
      startY: 0, //鼠标按下初始纵坐标
      X: 0, //鼠标移动横坐标
      Y: 0, //鼠标移动纵坐标
      slideLeft: 0, //滑块left值
      openAnimation: false, //滑块过度效果
      blank_left: 10, //空白区域left值
      blank_top: 10, //空白区域top值
      isSuccess: false, //是否验证成功
      message: "", //提示信息

      intervalTime: ""
    };
  },
  created () {
    this.keyupEnter();
  },
  //计算属性
  computed: {},

  //钩子函数（页面挂载完成时触发）
  mounted () {
    let vm = this;
    let bgBoxList = this.$refs.bgBox.children;
    for (let i = 0; i < bgBoxList.length; i++) {
      bgBoxList[i].style.zIndex = bgBoxList.length - 1 - i;
    }
    bgImgTime();
    function bgImgTime () {
      vm.intervalTime = setInterval(() => {
        countimg(1);
      }, 3000);
    }
    function countimg (num) {
      for (let k = 0; k < num; k++) {
        for (let i = 0; i < bgBoxList.length; i++) {
          let index = bgBoxList[i].style.zIndex;
          index++;
          //前一张显示的图片
          if (index == bgBoxList.length) {
            index = 0;
            bgBoxList[i].classList.add("oldop");
            bgBoxList[i].classList.remove("newop");
          }
          //当前会显示的图片
          if (index == bgBoxList.length - 1) {
            bgBoxList[i].classList.add("newop");
            bgBoxList[i].classList.remove("oldop");
          }
          bgBoxList[i].style.zIndex = index;
        }
      }
    }
  },

  //自定义方法
  methods: {
    //验证
    blur (id) {
      if (id === 0 && !this.username) {
        this.message = "请输入用户名";
      } else if (id === 0 && this.username && this.message === "请输入用户名") {
        this.message = "";
      } else if (id === 1 && !this.password) {
        this.message = "请输入密码";
      } else if (id === 1 && this.password && this.message === "请输入密码") {
        this.message = "";
      }
    },
    //登录
    login () {
      let vm = this;
      if (!vm.username) {
        vm.message = "请输入用户名";
      } else if (!vm.password) {
        vm.message = "请输入密码";
      } else {
        let body = {
          account: vm.username,
          password: vm.password
        };
        api.postLogin(body).then(res => {
          if (res.data.code == 200) {
            sessionStorage.setItem("h_token", res.data.data.token);
            sessionStorage.setItem("userInfo", JSON.stringify(res.data.data));
            vm.$router.replace({ name: 'courseList' });
          }
        });
      }
    },
    keyupEnter () {
      let vm = this;
      document.onkeydown = e => {
        let body = document.getElementsByTagName('body')[0]
        if (e.keyCode === 13 && e.target.baseURI.match('/') && e.target === body) {
          vm.login()
        }
      }
    }

  }
};
</script>

<style lang="scss" scoped>
#login {
  height: 100%;
  width: 100%;
  .header {
    height: 50px;
    width: 100%;
    background-color: #333;
    padding: 0 200px;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 12;
    .logo {
      display: flex;
      .logo-box {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        margin-top: 5px;
        .logo-img {
          width: 100%;
          height: 100%;
        }
      }
      .name {
        color: #fff;
        margin-left: 20px;
        line-height: 50px;
        font-weight: bold;
        letter-spacing: 2px;
        font-size: 16px;
      }
    }
  }
  .content {
    height: 100%;
    width: 100%;
    padding-top: 50px;
    box-sizing: border-box;
    background-color: #363636;
    .login-box {
      width: 420px;
      height: 300px;
      padding: 20px 60px;
      box-sizing: border-box;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 10px;
      position: fixed;
      top: 50%;
      left: 50%;
      margin-top: -150px;
      margin-left: -210px;
      z-index: 20;
      .login-title {
        color: #fff;
        text-align: center;
        font-size: 18px;
        margin: 10px 0;
      }
      .login-form {
        // margin-top: 20px;
        position: relative;
        input {
          box-sizing: border-box;
          width: 100%;
          height: 38px;
          padding: 5px 5px;
          margin-top: 15px;
          border-radius: 3px;
          border: 1px solid #dcdcdc;
          outline: none;
          z-index: 20;
          position: relative;
          background: rgba(220, 220, 220, 0.7);
          &:focus {
            border: 1px solid #409eff;
          }
        }

        #tips {
          width: 100%;
          height: 20px;
          color: #f56c6c;
          margin-top: 30px;
          font-size: 14px;
          position: absolute;
          bottom: -110px;
          &::before {
            content: "";
            clear: both;
            display: block;
          }
        }
        .login-btn {
          width: 100%;
          height: 38px;
          margin-top: 160px;
          background-color: #409eff;
          border-radius: 4px;
          text-align: center;
          line-height: 38px;
          font-weight: bold;
          position: absolute;
          bottom: -60px;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
  .bg-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    .bg-img-list {
      width: 100%;
      height: 100%;
      position: relative;

      .img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover !important;
        transition: opacity 1s linear;
        &::after {
          content: "";
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          right: 0;
          background: inherit;
          filter: blur(6px);
          z-index: 10;
        }
      }
      .newop {
        opacity: 1;
      }
      .oldop {
        opacity: 0;
      }
    }
  }
}
</style>
